<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
<script type="text/javascript">
	/***
	 Simple jQuery Slideshow Script
	 Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it :)
	 ***/

	function slideSwitch() {
		var $active = $('#slideshow .image.active');

		if ($active.length == 0)
			$active = $('#slideshow .image:last');

		// use this to pull the images in the order they appear in the markup
		var $next = $active.next().length ? $active.next() : $('#slideshow .image:first');

		// uncomment the 3 lines below to pull the images in random order

		//var $sibs  = $active.siblings();
		//var rndNum = Math.floor(Math.random() * $sibs.length );
		//var $next  = $( $sibs[ rndNum ] );

		$active.addClass('last-active');

		$next.css({
			opacity : 0.0
		}).addClass('active').animate({
			opacity : 1.0
		}, 1000, function() {
			$active.removeClass('active last-active');
		});
	}

	$(function() {
		$("#slideshow .image").eq(Math.random() * 3).addClass("active")
		setInterval("slideSwitch()", 5000);
	});

	$(document).ready(function() {
		$("img").lazyload({
			effect : 'fadeIn'
		});
	});

</script>

<style type="text/css">
	/*** set the width and height to match your images **/

	#slideshow {
		position: relative;
		height: 230px;
	}

	#slideshow .image {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 8;
		opacity: 0.0;
	}

	#slideshow .image .aviso {
		position: absolute;
		bottom: 20px;
		left: 45px;
		z-index: 1;
	}

	#slideshow .image.active {
		z-index: 10;
		opacity: 1.0;
	}

	#slideshow .image.last-active {
		z-index: 9;
	}

</style>

<div id="slideshow">
	<div class="image">
		<img class="aviso" src="img/sumilla.png" height="74" width="273" >
		<img data-original="photo/slide-2.png" src="img/grey.gif" alt="Slideshow Image 1" width="940" height="227">
	</div>

	<div class="image">
		<img class="aviso" src="img/sumilla1.png" height="74" width="273" >
		<img data-original="photo/slide-3.png" src="img/grey.gif" alt="Slideshow Image 2" width="940" height="227">
	</div>

	<div class="image">
		<img class="aviso" src="img/sumilla2.png" height="74" width="273" >
		<img data-original="photo/slide-4.png" src="img/grey.gif" alt="Slideshow Image 3" width="940" height="227">
	</div>

</div>